<template>
  <div class="container">
    <nav-bar title="售后订单" />
    <div class="notips" v-if="orders.length===0">
      暂无数据
    </div>

    <div class="list" v-else>
      <div 
        class="item" 
        v-for="(item, index) in orders" 
        :key="index"
        @click="goToOrderRefund(item)"
      >
        <div class="order-id">
          订单编号: {{item.OrderId}}
        </div>
        <div class="pro-info">
          <img :src='item.Img' />
          <div class="rt">
            <div class="name">{{item.ProductName}}</div>
            <div class="sort">
              <span v-if="item.Color && item.Color !== '室内'">颜色: {{item.Color}}</span>
              <span v-if="item.Size">尺寸: {{item.Size}}</span>
            </div>
          </div>
        </div>
        <div class="time-status-deal">
          <div class="status-deal">
            <div class="price">退款金额: <i>¥{{item.Amount}}</i>元</div>
            <div class="status">{{item.RefundStatus}}</div>
          </div>
        </div>
        <div class="links">
          <div class="type">{{item.RefundMode}}</div>
          <div class="link">查看详情</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getRefundList } from '../../network/order'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      orders: [],
    }
  },
  mounted() {
    getRefundList(list => {
      this.orders = list
    })
  },
  methods: {
    goToOrderRefund(order){
      sessionStorage.setItem('refundOrder', JSON.stringify(order))
      this.$router.push({
        path: '/orderRefund',
        query: {
          orderId: order.Id
        }
      })
    }
  },
}
</script>

<style scoped>
.tips{
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  font-size: 14px;
}
.tips img{
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.list{
  border-top: 1px solid #e4e4e4;
}
.item{
  margin-bottom: 10px;
  background-color: #ffffff;
  padding: 0 15px;
}
.item .time-status-deal{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f4f4f4;
  padding: 0 20px;
  border-radius: 3px;
}
.item .time-status-deal img{
  width: 22px;
  height: 22px;
  padding-right: 10px;
}
.item .status-deal{
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item .status-deal .price i{
  color: #d50721;
  font-weight: bold;
}
.item .status-deal .status{
  padding-right: 10px;
  margin-right: 5px;
  color: #000;
  font-weight: bold;
  /* border-right: 1px solid #cccccc; */
}
.item .pro-info{
  padding: 12px 0 15px 0;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.item .pro-info img{
  width: 90px;
  height: 90px;
  margin-right: 10px;
  flex-shrink: 0;
}
.item .pro-info .name{
  flex-grow: 1;
  padding-right: 10px;
  height: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
  font-size: 14px;
}
.item .pro-info .rt .sort{
  font-size: 14px;
  color: #999;
}
.item .pro-info .rt .sort span{
  padding-right: 20px;
}
.item .pro-info .price-num{
  text-align: right;
}
.item .pro-info .price-num .num{
  color: #999;
}
.item .total{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  padding-right: 10px;
}
.item .total .amount{
  padding-right: 10px;
}
.item .total .price i{
  padding-left: 5px;
  color: #d50721;
}
.links{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 15px 10px;
}
.links .type{
  color: #999;
  font-size: 14px;
}
.links .link{
  min-width: 80px;
  padding: 8px 15px;
  font-size: 14px;
  margin-left: 10px;
  border-radius: 50px;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  text-align: center;
}
.links .link-on{
  border: none;
  color: #ffffff;
  background-color: #d50721;
}
.links .link-ongray{
  border: none;
  color: #ffffff;
  background-color: #222;
}
.notips{
  text-align: center;
  line-height: 10;
  border: none;
  color: #999;
}
.order-id{
  color: #999;
  padding-top: 15px;
}
</style>